<template>
    <div class="container">
        <m-header>请假登记</m-header>
        <div class="main">
            <div class="info-wrap">
                <!--<div class="title">基本信息</div>-->
                <div class="content">
                    <div class="cell" v-for="(item,index) in fieldList" :key="index">
                        <m-form
                                ref="formRef"
                                :field="item"
                                @change="onChange"
                                :value="mValue[item.field_id]"
                                :disabled="disabled"
                        ></m-form>
                    </div>
                </div>
            </div>

        </div>
        <div class="footer">
            <van-button class="btn" color="#24C373" v-show="disabled" plain @click="onDelete">取消请假</van-button>
            <van-button class="btn" color="#24C373" v-show="disabled" @click="disabled = false">修改请假信息</van-button>
            <van-button class="btn" color="#24C373" v-show="!disabled && rid" plain @click="disabled = true" v-prevent-re-click>取消</van-button>
            <van-button class="btn" color="#24C373" v-show="!disabled" @click="onSave" v-prevent-re-click>提交</van-button>
        </div>
    </div>
</template>

<script>
  import form from '@/components/form/form'
  import {preventReClick} from "../../utils/plugins";
  import {mapState} from 'vuex'
  import {addLeaveRegistrationNoOrder,editLeaveRegistration,getLeaveRegistration,delLeaveRegistration} from "../../request/api";
  import dialog from '@/utils/dialog';


  export default {
    name: "leaveAskNoOrder",
    components: {
      "m-form": form
    },
    computed:{
      ...mapState({
        customerId: state => state.user.customerId
      }),
    },

    watch:{
      ['$route']: {
        handler(val){
          if (val.path === '/leaveAskNoOrder'){
            let query = val.query,
              {rid} = query;
            this.rid = rid;
            if (rid) {
              this.getData();
            }else {
              this.disabled = false;
              this.mValue = {}
            }
          }
        },immediate: true
      }
    },
    data(){
      return {
        fieldList: [
          {
            label: '请假日期',
            type: 'date',
            field_id: 'leave_date',
            rule: [{required: true}],
          },
          {
            label: '请假方向',
            type: 'checkbox',
            defaultValue: ['is_leave_on_gotoschool','is_leave_on_leaveschool'],
            options: [
              {name: '去程请假',id: 'is_leave_on_gotoschool'},
              {name: '回程请假',id: 'is_leave_on_leaveschool'}
            ],
            field_id: 'is_leave_on_gotoschool',
            rule: [{required: true}],
          },
          {
            label: '学生姓名',
            type: 'text',
            field_id: 'passengers_name',
            rule: [{required: true}],
          },
          {
            label: '学校名称',
            type: 'text',
            field_id: 'school_name',
            rule: [{required: true}],
          },
          {
            label: '班级',
            type: 'text',
            field_id: 'class_',
            rule: [{required: true}],
          },
          {
            label: '学生学号',
            type: 'text',
            field_id: 'student_id',
            rule: [{required: true}],
          },
          {
            label: '证件号',
            type: 'text',
            field_id: 'identification_no',
            rule: [{required: true}],
            /*rule: [{required: true},{validator: (val) => {
                if (this.mValue.identification_type_name !== '身份证') {
                  return true;
                }
                let _IDRe18 = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
                let _IDre15 =  /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/;
                // 校验身份证：
                return _IDRe18.test( val ) || _IDre15.test( val )

              }}],*/

          },
          {
            label: '监护人手机',
            type: 'number',
            field_id: 'phone',
            rule: [{required: true},{pattern: /^1[3456789]\d{9}$/}],
          },
          {
            label: '请假原因',
            type: 'textarea',
            field_id: 'abstract_',
          },

        ],
        mValue: {},
        disabled: true,
        rid: 0

      }
    },
    methods: {
      getData(){
        let {rid} = this;
        this.$Loading();
        getLeaveRegistration({row_id: rid}).then(res => {
          if (res.errcode != 0) return;
          this.$toast.clear();
          let data = res.row[0] || {};
          //去程回程标识
          let is_leave_on_gotoschool = [];
          data.is_leave_on_gotoschool && is_leave_on_gotoschool.push('is_leave_on_gotoschool')
          data.is_leave_on_leaveschool && is_leave_on_gotoschool.push('is_leave_on_leaveschool');
          data.is_leave_on_gotoschool = is_leave_on_gotoschool
          this.mValue = data;
          this.disabled = true;
        })
      },
      onEdit(){
        this.disabled = false;
      },
      onChange(e){
        let {field,val} = e,
          {field_id} = field;
        let obj = {[field_id]: val};

        this.mValue = {...this.mValue,...obj};

      },
      onSave(){
        if (this.validAll()){
          this.$Loading();
          let {customerId,isEdit,rid} = this,
            param = {...this.mValue,customer_id: customerId},
            api,is_leave = param.is_leave_on_gotoschool;

          param.is_leave_on_gotoschool = is_leave.includes('is_leave_on_gotoschool')
          param.is_leave_on_leaveschool = is_leave.includes('is_leave_on_leaveschool');


          if (rid) {
            api = editLeaveRegistration;
            param.row_id = rid;
          }else {
            api = addLeaveRegistrationNoOrder
          }
          api(param).then(res =>{
            if (res.errcode !== 0)return;
            this.rid = res.row[0] && res.row[0].row_id || 0 ;
            this.$toast.clear();
            this.getData();
          })
        }

      },
      onDelete(){
        dialog.confirm('确定删除请假登记？').then(() => {
          this.$Loading()
          delLeaveRegistration(this.rid).then(()=>{
            this.$Toast('删除成功');
            this.$router.go(-1);
          })
        })
      },
      validAll(){
        let isValids = [];
        this.$refs.formRef.forEach(item => {
          item.valid(item => isValids.push(item) )
        });
        return !isValids.some(item => !item)
      },
    },
  }
</script>

<style scoped lang="less">
    .main{
        padding: 10px;
        overflow: auto;

        .cell{
            display: flex;
            align-items: center;

            .label{
                font-size: 15px;
                color: #999;
            }
            .value{
                flex: 1;
                width: 0;
                & > img{
                    width: 100%;
                }
            }
        }
    }
    .footer{
        padding: 10px;
        display: flex;
        .btn{
            width: 100%;
            & + .btn{
                margin-left: 10px;
            }
        }
    }
</style>
